<template>
    <el-card shadow="never" style="margin-top: 15px">
        <div slot="header" class="clearfix">
            <span>订单：{{this.currentId}}</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="showOrder">返回</el-button>
        </div>
        <div style="margin-top: 20px">
            <span class="font-small">基本信息</span>
        </div>
        <div class="table-layout">
            <el-row>
                <el-col :span="4" class="table-cell-title">订单编号</el-col>
                <el-col :span="4" class="table-cell-title">用户账号</el-col>
                <el-col :span="4" class="table-cell-title">支付方式</el-col>
                <el-col :span="4" class="table-cell-title">订单来源</el-col>
                <el-col :span="4" class="table-cell-title">物流单号</el-col>
                <el-col :span="4" class="table-cell-title">自动确认收货时间</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="table-cell">{{order.orderId}}</el-col>
                <el-col :span="4" class="table-cell">{{order.buyerNick}}</el-col>
<!--                <el-col :span="4" class="table-cell">{{order.paymentType || "未支付"}}</el-col>-->
                <el-col :span="4" class="table-cell">{{"在线支付"}}</el-col>
                <el-col :span="4" class="table-cell">PC端</el-col>
                <el-col :span="4" class="table-cell">{{order.shippingCode}}</el-col>
                <el-col :span="4" class="table-cell">{{order.shippingCode?"14天":"未发货"}}</el-col>
            </el-row>

        </div>
        <div style="margin-top: 20px">
            <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
            <span class="font-small">收货人信息</span>
        </div>
        <div class="table-layout">
            <el-row>
                <el-col :span="6" class="table-cell-title">收货人</el-col>
                <el-col :span="6" class="table-cell-title">手机号码</el-col>
                <el-col :span="6" class="table-cell-title">邮政编码</el-col>
                <el-col :span="6" class="table-cell-title">收货地址</el-col>
            </el-row>
            <el-row>
                <el-col :span="6" class="table-cell">{{order.receiver}}</el-col>
                <el-col :span="6" class="table-cell">{{order.receiverMobile}}</el-col>
                <el-col :span="6" class="table-cell">{{order.receiverZip}}</el-col>
                <el-col :span="6" class="table-cell">{{order.receiverAddress}}</el-col>
            </el-row>
        </div>
        <div style="margin-top: 20px">
            <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
            <span class="font-small">商品信息</span>
        </div>
        <el-table
                ref="orderItemTable"
                :data="order.orderDetails"
                style="width: 100%;margin-top: 20px" border>
            <el-table-column label="商品图片" width="120" align="center">
                <template slot-scope="scope">
                    <img :src="scope.row.image" style="height: 80px">
                </template>
            </el-table-column>
            <el-table-column label="商品名称" align="center">
                <template slot-scope="scope">
                    <p>{{scope.row.title}}</p>
<!--                    <p>品牌：{{scope.row.productBrand}}</p>-->
                </template>
            </el-table-column>
            <el-table-column label="价格/货号" width="240" align="center">
                <template slot-scope="scope">
                    <p>价格：￥{{scope.row.price/100}}</p>
                    <p>货号：{{scope.row.skuId}}</p>
                </template>
            </el-table-column>
            <el-table-column label="属性" width="200" align="center">
                <template slot-scope="scope">
                    {{scope.row.spec}}
                </template>
            </el-table-column>
            <el-table-column label="数量" width="120" align="center">
                <template slot-scope="scope">
                    {{scope.row.num}}
                </template>
            </el-table-column>
            <el-table-column label="小计" width="120" align="center">
                <template slot-scope="scope">
                    ￥{{scope.row.price*scope.row.num/100}}
                </template>
            </el-table-column>
        </el-table>
        <div style="float: right;margin: 20px">
            合计：<span class="color-danger">￥{{order.totalPay/100}}</span>
        </div>
        <div style="margin-top: 60px">
            <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
            <span class="font-small">费用信息</span>
        </div>
        <div class="table-layout">
            <el-row>
                <el-col :span="6" class="table-cell-title">商品合计</el-col>
                <el-col :span="6" class="table-cell-title">运费</el-col>
                <el-col :span="6" class="table-cell-title">优惠券</el-col>
                <el-col :span="6" class="table-cell-title">积分抵扣</el-col>
            </el-row>
            <el-row>
                <el-col :span="6" class="table-cell">￥{{order.totalPay/100}}</el-col>
                <el-col :span="6" class="table-cell">￥0</el-col>
                <el-col :span="6" class="table-cell">-￥0</el-col>
                <el-col :span="6" class="table-cell">-￥0</el-col>
            </el-row>
            <el-row>
                <el-col :span="6" class="table-cell-title">活动优惠</el-col>
                <el-col :span="6" class="table-cell-title">折扣金额</el-col>
                <el-col :span="6" class="table-cell-title">订单总金额</el-col>
                <el-col :span="6" class="table-cell-title">应付款金额</el-col>
            </el-row>
            <el-row>
                <el-col :span="6" class="table-cell">-￥0</el-col>
                <el-col :span="6" class="table-cell">-￥0</el-col>
                <el-col :span="6" class="table-cell">
                    <span class="color-danger">￥{{order.actualPay/100}}</span>
                </el-col>
                <el-col :span="6" class="table-cell">
                    <span class="color-danger">￥{{order.actualPay/100}}</span>
                </el-col>
            </el-row>
        </div>
    </el-card>
</template>

<script>
    export default {
        name: "OrderDetails",
        props:['currentId'],
        data(){
            return{
                order:{},

            }
        },
        methods:{
            showOrder(){
                this.$emit('showOrder')
            }
        },
        created() {
            this.$http.get("/order/order/"+this.currentId).then(res=>{
                this.order = res.data.data
            })
        }
    }
</script>

<style scoped>
    .detail-container {
        width: 80%;
        padding: 20px 20px 20px 20px;
        margin: 20px auto;
    }

    .operate-container {
        background: #F2F6FC;
        height: 80px;
        margin: -20px -20px 0;
        line-height: 80px;
    }

    .operate-button-container {
        float: right;
        margin-right: 20px
    }

    .table-layout {
        margin-top: 20px;
        border-left: 1px solid #DCDFE6;
        border-top: 1px solid #DCDFE6;
    }

    .table-cell {
        height: 60px;
        line-height: 40px;
        border-right: 1px solid #DCDFE6;
        border-bottom: 1px solid #DCDFE6;
        padding: 10px;
        font-size: 14px;
        color: #606266;
        text-align: center;
        overflow: hidden;
    }

    .table-cell-title {
        border-right: 1px solid #DCDFE6;
        border-bottom: 1px solid #DCDFE6;
        padding: 10px;
        background: #F2F6FC;
        text-align: center;
        font-size: 14px;
        color: #303133;
    }
</style>